<template>
  <div>
    <div v-if="dataList && dataList.length > 0">
      <div class="message-ai" v-for="messageObj in dataList">
        <MarkdownRenderer
          style="overflow-wrap: break-word"
          class="message-content"
          :source="messageObj.content"
        />
        <div style="display: flex; justify-content: space-between; margin-top: 6px">
          <div>{{ messageObj.createdDate }}</div>
          <div
            @click="copyMsg(messageObj)"
            style="margin-left: 8px; display: flex; align-items: center; cursor: pointer"
          >
            <img src="/icon/copy.svg" style="width: 24px" />
            <div>复制</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="dataList && dataList.length === 0">
      <a-empty
        image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
        description="暂无收藏，点击收藏按钮即可保存常用对话！"
      >
        <template #image>
          <img
            style="height: 40px"
            src="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            alt="empty"
          />
        </template>
      </a-empty>
    </div>
    <div v-else>
      <a-skeleton active class="message-ai" />
    </div>
  </div>
</template>
<script setup>
import Http from '@/api/http'
import MarkdownRenderer from '@/views/component/MarkdownRenderer.vue'
import { message } from 'ant-design-vue'
import copy from 'copy-to-clipboard'
import { onMounted, ref } from 'vue'

const dataList = ref(null)
const searchValue = ref('')

function findAll() {
  Http.post('/api/collection/findList', {
    content: searchValue.value
  }).then((res) => {
    dataList.value = res.data
  })
}

const copyMsg = (data) => {
  copy(data.content)
  message.success('已复制')
}

onMounted(async () => {
  findAll()
})
</script>

<style scoped>
.message-ai {
  margin-bottom: 20px;
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); /* 修改为四周阴影效果 */
  transition: box-shadow 0.3s ease; /* 阴影过渡效果 */
  padding: 12px;
}

.message-ai:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.message-content {
  max-height: 200px;
  overflow-y: auto;
}
</style>
